<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{total}} 条</span>
        </template>
        <template #right>
          <el-button type="warning" v-allow="'sss'" size="small" @click="$router.push('/uploadExcel')">excel导入</el-button>
          <el-button type="danger" size="small" @click="handleDownload">excel导出</el-button>
          <el-button type="primary" size="small" @click="dialogVisible=true">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;" >
        <el-table border :data="list" :default-sort = "{prop: 'timeOfEntry', order: 'descending'}">
          <el-table-column label="序号" type="index"/>
          <el-table-column label="姓名" prop="username"/>
          <el-table-column label="图片" >
            <template #default="{row}">
              <img :src="row.staffPhoto" alt="" style="width:100%">
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式"  prop="formOfEmployment">
            <template #default={row}>
              {{Departments(row.formOfEmployment)}}
            </template>
          </el-table-column>
          <el-table-column label="部门"  prop="departmentName"/>
          <el-table-column label="入职时间" sortable  prop="timeOfEntry"/>
          <!-- <el-table-column label="账户状态" prop="username" /> -->
          <el-table-column label="操作" width="280" >
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`employees/detail?id=${row.id}`)">查看</el-button>
              <el-button type="text" size="small" @click="hAal(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="hDele(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1, 2, 6, 19]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </el-row>
      </el-card>

      <!-- 弹框 -->
      <el-dialog title="新增员工" @close="resetForm"  :visible.sync="dialogVisible">
        <empDialog @renderer="hRenderer"  ref="ref" @cancel="dialogVisible=false"></empDialog>
      </el-dialog>

      <!-- 弹框 分配角色 -->
       <el-dialog title="分配角色"   :visible.sync="showDialogVisible">
        <assignRole @close="showDialogVisible=false" v-if="showDialogVisible" :id="userI"></assignRole>
       </el-dialog>
    </div>
  </div>
</template>
<script>
  import { getDepartments,delDepartments } from "@/api/departments";
  import  hireType  from "@/constant/employees";
  import  empDialog  from "@/views/employees/empDialog";
  import  assignRole  from "@/views/employees/assignRole";
 
  const hire = {}
  hireType.hireType.forEach(item=>{ 
    hire[item.id]=item.value
   })
  export default {
    components:{
empDialog,
assignRole
    },
     data() {
      return {
        page:1,
        size:2,
        list:[],
        total:0,
        dialogVisible:false,//显示隐藏
        showDialogVisible:false,
        userI:''
      };
     },
     created(){
      this.loadDepartments()
     },
     methods:{
      // 分配
      hAal(id){
        console.log(id);
        this.showDialogVisible=true
        this.userI=id
        console.log(this.userI);
      },
      // 导入
      formData(list){
        const map = {
                'id': '编号',
                'password': '密码',
                'mobile': '手机号',
                'username': '姓名',
                'timeOfEntry': '入职日期',
                'formOfEmployment': '聘用形式',
                'correctionTime': '转正日期',
                'workNumber': '工号',
                'departmentName': '部门',
                'staffPhoto': '头像地址'
            }

            const one = list[0]
            if(!one ) return

            const  header = Object.keys(one).map(enkey=>{
              return map[enkey]
            })
            const data = list.map(item=>{
              const key = item.formOfEmployment
              item['formOfEmployment']=hire[key]||'未知'
              return Object.values(item)
            })
            return {header:header,data:data}
      },

      // 导出按钮
    async  handleDownload() {
      try {
          const res = await getDepartments(this.page,this.size)
            console.log(res);
          const{header,data}=this.formData(res.data.rows)
      
        import('@/vendor/Export2Excel').then(excel => {
         
          excel.export_json_to_excel({
            header: header,
            data:data,
            filename: this.filename,
            autoWidth: this.autoWidth,
            bookType: this.bookType
          })
         
        })
       } catch (error) {
          console.log(error);
        }
    },
      // 重置功能
      resetForm(){
        this.$refs.ref.resets()
      },
      // 删除
     async hDele(id){
        if(!confirm('是否确认删除')) return this.$message.error('取消')

        try {
          const res = await delDepartments(id)
          console.log(res);
          this.$message.success('删除成功')
          this.loadDepartments()
        } catch (error) {
          console.log(error);
        }
      },
      // 渲染
      hRenderer(){
        this.total++
        const num  = Math.ceil(this.total/this.size)
        this.page=num
        this.loadDepartments()
        this.dialogVisible=false
      },
      // 分页
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.page=1
        this.size=val
        this.loadDepartments()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page=val
        this.loadDepartments()
      },
      // 枚举使用
      Departments(id){
        // return hireType.hireType.find(item =>item.id==id).value
        return hire[id]||'未知'
      },
      // 获取员工参数
      async  loadDepartments(){
        try {
          const res = await getDepartments(this.page,this.size)
            console.log(res);
          this.list=res.data.rows
          this.total=res.data.total
        } catch (error) {
          console.log(error);
        }
      }
     }
  }
</script>